<template>
    <div class='hello-page'>
        <h1> {{ name }}</h1>
        <div class="city">
            <p>请选择城市：</p>
            <el-cascader :props="props" placeholder="请选择城市" clearable></el-cascader>
        </div>
    </div>
</template>

<script>
export default {
    name: 'hello-page',
    /**
    * 定义组件的data函数，用于声明组件内部的状态。
    * 
    * @returns {Object} 返回一个对象，其中包含组件内部的状态。这些状态将在组件的生命周期内被管理和使用。
    */
    data() {
        return {
            name: "城市选择",
            props: {//点击后执行的函数
                value: "id",//修改联级器value的默认值
                label: "name",//修改联级器label的默认值显示的文字
                lazy: true,//是否懒加载
                multiple: true,//是否多选
                checkStrictly: true,///是否严格的遵循父子节点的选中状态
                lazyLoad: (node, resolve) => {
                    this.$http.get('/area', {
                        params: {
                            id: node.value
                        }
                    }).then(res => {
                        console.log(res.data)
                        resolve(res.data)
                    })
                }
            }
        }
    },

    methods: {
        gocity(id) {
            this.$http.get('/area', {
                params: {
                    id: id
                }
            }).then(res => {
                if (res.status === 200) {
                    console.log('请求获取数据：', res.data);
                    this.dataList = res.data
                    return res.data
                }
            })
        },
    }
}

</script>

<style scoped>
.city {
    margin-top: 20px;
    padding: 10px;
    border: 1px solid #ccc;
    font-size: 14px;
}
</style>